import {MouseDownSite} from './htmlToCanvas';

/**
 * @Description: 创建dom样式的集合
 * @author Beon
 * @date 2021/7/6
*/
export default class DomCreate{

    /**
	 * 创建dropbox外层包围dom
	 * @param dom
	 * @returns {HTMLDivElement}
	 */
    static createDropBoxDom(dom: HTMLElement): HTMLElement {
        const baseDom = document.createElement('div');
	    baseDom.style.overflow = 'hidden';
	    baseDom.style.width = '100%';
	    baseDom.style.zIndex = '1';
	    baseDom.style.transition = '.38s all cubic-bezier(0.905, 0.050, 0.135, 0.940)';

	    baseDom.append(dom);
        return baseDom;
    }

    /**
     * 创建divDom样式
     * @param e
     * @param mouseDownSite
     * @returns {HTMLDivElement}
     * @param site
     */
    static createCanvasOutDom(e: MouseEvent, mouseDownSite: MouseDownSite, site: {width: number, height: number}): HTMLDivElement {
        const outDom = document.createElement('div');
        outDom.style.position = 'fixed';
        outDom.style.left = `${mouseDownSite.left}px`;
        outDom.style.top = `${mouseDownSite.top}px`;
        outDom.style.pointerEvents = 'none';
        outDom.style.zIndex = '1';
        outDom.style.opacity = '0.8';
        outDom.style.border = '1px solid #f0f0f0';
        outDom.style.boxShadow = '0 0 6px 0 rgba(0, 0, 0, 0.50)';
        outDom.style.width = `${site.width}px`;
        outDom.style.height = `${site.height}px`;
        return outDom;
    }

    static dealDropHover(): HTMLElement {
        const dropMovingLine = document.createElement('div');
	    dropMovingLine.style.height = '2px';
	    dropMovingLine.style.position = 'fixed';
	    dropMovingLine.style.backgroundColor = 'orange';
	    dropMovingLine.style.zIndex = '0';
	    dropMovingLine.style.transition = '.38s all cubic-bezier(0.905, 0.050, 0.135, 0.940)';
	    return dropMovingLine;
    }

    static createNoShowDropBox(): HTMLElement {
	    const dropMovingLine = document.createElement('div');
	    dropMovingLine.style.position = 'fixed';
	    dropMovingLine.style.left = '100%';
	    dropMovingLine.style.opacity = '0';
	    dropMovingLine.style.width = '100%';
	    dropMovingLine.style.height = '100%';

	    setTimeout(() => {
		    document.body.append(dropMovingLine);
	    });
	    return dropMovingLine;
    }
}
